<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="node_modules/axios/dist/axios.min.js"></script>
    <script src="node_modules/mockjs/dist/mock-min.js"></script>
    <script src="mock/mock.js"></script>
    <script src="mock/api.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="root" v-cloak>
        <app-list @edit="editFn" :editeduser="terimal" :index="changedIndex"></app-list>
        <app-footer @change="changeFn"></app-footer>
        <a-dialog
                v-if="dialogIsShow"
                :edituser="editCurrentUser"
                @updatadialogisshow="updatadialogisshow"
                @editdone="editdone"
        ></a-dialog>
    </div>
</body>
<script type="text/x-template" id="app-dialog">
    <div class="mask">
        <div>
            <div class="input-group">
                <label for="username">姓名</label>
                <input type="text" id="username" v-model="edituser.username">
            </div>
            <div class="input-group">
                <label for="age">年龄</label>
                <input type="text" id="age" v-model="edituser.age">
            </div>
            <div class="input-group">
                <label for="phoneNum">电话</label>
                <input type="text" id="phoneNum" v-model="edituser.phoneNumber">
            </div>
        </div>
        <button @click="submit">提交</button>
        <button @click="cancel">取消</button>
    </div>
</script>
<script src="app-dialog.js"></script>
<script type="text/x-template" id="app-footer">
    <ul class="ft-bar">
        <li v-for="(item, key) in ftMenu"
            @click="select(key)"
            :class="{active: key === selectedKey}"
            :key="key">
            {{item}}
        </li>
    </ul>
</script>
<script src="app-footer.js"></script>
<script type="text/x-template" id="app-list">
    <ul v-show="!!usersData.length">
        <li>
            <span>姓名</span>
            <span>年龄</span>
            <span>电话</span>
            <span>操作</span>
        </li>
        <transition-group name="slide">
            <li v-for="(item, key) in test"
                :key="item.username">
                <span>{{item.username}}</span>
                <span>{{item.age}}</span>
                <span>{{item.phoneNumber}}</span>
                <span @click="edit(key)">编辑</span>
            </li>
        </transition-group>
    </ul>
</script>
<script src="app-list.js"></script>
<script src="root.js"></script>
</html>